<style lang='stylus'>
page {
  height: 100%;
}

.header {
  width: 100%;
}

.scroller {
  width: 100%;
  overflow: hidden;
}
</style>
<template>
  <view class="content  flex flex-column dlc-bg">
    <view class="scroller flex1">
      <scroll-view
        class="scroll-view"
        scroll-y
        :style="{height:scrollerObj.height + 'px'}"
        @scrolltolower="scrolltolower"
        :lower-threshold="scrollerObj.lowerThreshold"
      >
        <view class="pd20 mg30-x mgt30 bgw radius-8 ft26" v-for="order in list" :key="order.orderNo">
          <navigator hover-class="none" :url="'/pagesA/order/detail?orderId='+ order.orderId">
            <view class="item-header flex flex-between border-bottom pdb20">
              <text class="ft28"
              style="color:#000"
              >订单号:{{order.outTradeNo}}</text>
            </view>

            <view class="item-body pdt20">
              <view class="cell flex flex-between mgb12">
                <view >
                  <text class="dlc-gray">订单状态</text>
                </view>
                <view >
                  <text
                    :class="order.payStatus == 1?'dlc-danger'
                     :order.payStatus ==2?'dlc-success'
                     :order.payStatus ==3?'dlc-success'
                     :order.payStatus ==4?'dlc-success'
                     :order.payStatus ==5?'dlc-warning'
                     :'dlc-success'"
                  >
                    {{order.payStatus==1?"待充电"
                    :order.payStatus==2?"充电失败"
                    :order.payStatus==3?"进行中"
                    :order.payStatus==4?"待支付"
                    :order.payStatus==5?"已支付"
                    :order.payStatus==6?"不计费"
                    :order.payStatus==7?"退款":"未知"}}
                  </text>
                </view>
              </view>

              <view class="cell flex flex-between mgb12">
                <text class="dlc-gray">订单类型</text>
                <text>{{order.orderType==1?"按次数收费":"按时收费"}}</text>
              </view>

              <!-- <view class="cell flex flex-between mgb12">
                <text class="dlc-gray">订单时长:</text>
                <text>{{order.timeQuantum}}</text>
              </view> -->

              <view class="cell flex flex-between mgb12">
                <text class="dlc-gray">使用时长</text>
                <text>{{order.useTimeQuantum}}</text>
              </view>

              <view class="cell flex flex-between mgb12" v-if="order.payType==4">
                <text class="dlc-gray">卡号</text>
                <text>{{order.cardNo}}</text>
              </view>

               <view v-if="order.payType!=4" class="cell flex flex-between mgb12">
                <text class="dlc-gray">支付金额</text>
                <text v-if="order.payStatus==6">-</text>
                <text v-else>{{order.orderAmount/100}}元</text>
              </view>

              <view class="cell flex flex-between mgb12">
                <text class="dlc-gray">支付类型</text>
                <text>
                  {{order.payType==1?"微信":
                  order.payType==2?"支付宝":
                  order.payType==3?"余额":
                  order.payType==4?"月卡":
                  order.payType==5?"IC卡":
                  order.payType==6? "线下":
                  "-"}}
                </text>
              </view>

              <view class="cell flex flex-between mgb12">
                <text class="dlc-gray">充电桩编号</text>
                <text>{{order.equipmentNumber}}</text>
              </view>
              <view class="cell flex flex-between mgb12">
                <text class="dlc-gray">使用充电桩端口号</text>
                <text>{{order.mouthNoShow}}号口</text>
              </view>

              <view class="cell flex flex-between mgb12">
                <text class="dlc-gray">充电开始时间</text>
                <text>{{order.ctime}}</text>
              </view>

              <view class="cell flex flex-between mgb12">
                <text class="dlc-gray">充电结束时间</text>
                <text>{{order.etime}}</text>
              </view>
              <view
                class="cell flex flex-between mgb12"
                v-if="order.payStatus==4||order.payStatus==5"
              >
                <text class="dlc-gray">结束原因</text>
                <text>
                  {{
                  order.endReason==null?"-"
                  :order.endReason==0?"充电结束"
                  :order.endReason==1?"充电结束"
                  :order.endReason==2?"充电结束" 
                  :order.endReason==3?"异常结束"
                  :order.endReason==4?"异常结束"
                  :order.endReason==5?"异常结束"
                  :order.endReason==6?"异常结束"
                  :order.endReason==7?"异常结束"
                  :order.endReason==8?"异常结束"
                  :order.endReason==9?"异常结束"
                  :order.endReason==10?"异常结束"
                  :order.endReason==11?"充电结束"
                  :order.endReason==12?"异常结束"
                  :order.endReason==13?"异常结束"
                  :order.endReason==14?"异常结束"
                  :order.endReason==15?"异常结束"
                  :order.endReason==16?"异常结束"
                  :order.endReason==17?"充电结束"
                  :"-"}}
                </text>
              </view>

              <!-- <view v-if="order.payStatus==6||order.payStatus==7||order.payStatus==8">
                <view class="cell flex flex-between mgb12" v-if="order.orderRefundAmoun!=0">
                  <text class="dlc-gray">退款金额:</text>
                  <text>{{(order.orderRefundAmount+order.orderRefundGivenAmount)/100}}元</text>
                </view>
                <view
                  class="cell flex flex-between mgb12"
                  v-if="order.orderRefundAmount+order.orderRefundGivenAmount!==0"
                >
                  <text class="dlc-gray">退款原因:</text>
                  <text>{{order.orderRefundReason==null?"-":order.orderRefundReason}}</text>
                </view>
              </view> -->
            </view>
          </navigator>
        </view>
        <i-load-more
          v-if="scrollerObj.loading || scrollerObj.isEnd"
          :tip="loadingTip"
          :loading="scrollerObj.loading"
        />
      </scroll-view>
    </view>
    <i-message id="message" />
  </view>
</template>

<script>
import { getFrontOrderList } from "@/api";
import { parseTime, getdTime } from "@/utils";
import LoadMore from "@/mixins/LoadMore";
import store from "@/store";
const { $Message } = require("@/wxcomponents/iview/base/index");
export default {
  mixins: [LoadMore],
  data() {
    return {
      offset: 1,
      limit: 20,
      total: 1,
      size: 10,
      current: 1,
      page: 1,
      searchCount: true,
      pages: 1,
      list: [],
      
    };
  },
  methods: {
    async fetchData() {
      //调用服务器接口
      const { data } = await getFrontOrderList({
        offset: this.offset,
        limit: this.limit,
      });
      if (data.code === 1) {
        this.pages = data.data.pages;
        let { records, total } = data.data;

        records = records.map((item, index) => {
          return {
            ...item,
            ctime:item.ctime == null? "-":item.ctime.slice(0, 19),
            etime:item.etime == null? "-":item.etime.slice(0, 19),
            useTimeQuantum:
              item.useTimeQuantum == 0 ? "-" : getdTime(item.useTimeQuantum),
          };
        });

        this.list = this.list.concat(records);
         this.scrollerObj.loading = false;
        if (this.pages > this.offset) {
          this.offset = this.offset + 1;
        }

        let len = this.list.length;

        if (len >= total) {
          this.scrollerObj.isEnd = true;
        }
      }
    },
    toOrderDetail(order) {
      let orderData = JSON.stringify(order);
      uni.navigateTo({
        url: "/pagesA/order/detail?order=" + orderData,
      });
    },
  },
  onLoad(query) {},
};
</script>

